<template>
  <div class="container-content">
    <el-form
      ref="elForm"
      :model="formData.kingBaseTransactionsCompanyEntity"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <!-- <el-form-item label-width="200px" label="编码" prop="companyCode">
                <el-input
                    v-model="formData.companyCode"
                    placeholder="请输入编码"
                    clearable
                    :style="{ width: '100%' }"
                >
                </el-input>
            </el-form-item> -->
      <el-form-item label-width="200px" label="描述" prop="companyDesc">
        <el-input
          v-model="formData.kingBaseTransactionsCompanyEntity.companyDesc"
          placeholder="请输入描述"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
        <!-- <el-form-item label-width="200px" label="数据状态" prop="dataStatus">
          <el-select
            v-model="formData.kingBaseTransactionsCompanyEntity.dataStatus"
            placeholder="请选择数据状态"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in dataStatusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item> -->
      <!-- <el-form-item label-width="200px" label="是否禁用" prop="isDisabled">
        <el-select
          v-model="formData.kingBaseTransactionsCompanyEntity.isDisabled"
          placeholder="请选择是否禁用"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in isDisabledOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label-width="200px" label="名称" prop="title">
        <el-input
          v-model="formData.kingBaseTransactionsCompanyEntity.title"
          placeholder="请输入名称"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="desc-title">操作明细</div>
    <el-table
      :data="formData.kingBaseTransactionsCompanyDetailEntities"
      style="width: 100%"
      highlight-current-row
      border
       :key="flagKey"
    >
      <template #empty
        ><el-button plain type="primary" round @click="addNewRow"
          >添加新行</el-button
        ></template
      >
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            plain
            icon="el-icon-plus"
            size="small"
            @click="handleDataAdd(scope.$index, scope.row)"
          ></el-button>
          <el-button
            plain
            icon="el-icon-minus"
            size="small"
            @click="handleDataDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column label="银行账号" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.bankAccount"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="账户名称" align="center">
        <template slot-scope="scope">
            <el-input v-model="scope.row.accountName"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="银行网点" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.bankNetwork" ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="开户银行" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.bankDeposit" ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="开户行地址" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.addressDeposit" ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="联行号" align="center">
        <template slot-scope="scope">
       <el-input v-model="scope.row.interbankNumber" ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="swiftCode"
        prop="childUnitCode"
        align="center"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.switchCode">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="币别" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.currencyName" >
             <i
                slot="suffix"
                class="el-icon-search"
                @click="openList('币别', scope.$index)"
              ></i>
          </el-input>
        </template>
      </el-table-column>
    </el-table>

 <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :append-to-body="list"
      width="60%"
     
    >
      <el-table :data="gridData"  @row-dblclick="getRow" v-if="title == '币别'">
        <el-table-column property="currencyName" label="名称"></el-table-column>
        <el-table-column
          property="currencySymbol"
          label="简称"
        ></el-table-column>
        <el-table-column property="code" label="编码"></el-table-column>
        <el-table-column
          property="updateTime"
          label="修改时间"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { add } from "@/api/base/data";
import {
  updataKingBaseTransactionsCompanyList,
  editKingBaseTransactionsCompanyList,
   getKingBaseCurrencyList,
  
} from "@/api/bim/outher";
export default {
  components: {},
  props: ["id"],
  data() {
    return {
      count:0,
       gridData: [],
      list: true,
      title: "",
      dialogVisible: false,
      flag: false,
      flagKey:0,
      formData: {
        kingBaseTransactionsCompanyDetailEntities: [],
        kingBaseTransactionsCompanyEntity: {
          companyCode: "",
          companyDesc: "",
          createBy: "",
          createTime: "",
          dataStatus: 0,
          deptId: "",
          id: "",
          isDisabled: 0,
          isSend: 0,
          isUsed: 0,
          limit: 0,
          page: 0,
          title: "",
          token: "",
          updateBy: "",
          updateTime: "",
        },
      },
      rules: {
        companyCode: [
          {
            required: true,
            message: "请输入编码",
            trigger: "blur",
          },
        ],
        companyDesc: [
          {
            required: true,
            message: "请输入描述",
            trigger: "blur",
          },
        ],
        dataStatus: [
          {
            required: true,
            message: "请选择数据状态",
            trigger: "change",
          },
        ],
        isDisabled: [
          {
            required: true,
            message: "请选择是否禁用",
            trigger: "change",
          },
        ],
        title: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
      },
      dataStatusOptions: [
        {
          label: "创建",
          value: 1,
        },
        {
          label: "审核中",
          value: 2,
        },
        {
          label: "已审核",
          value: 3,
        },
      ],
      isDisabledOptions: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 2,
        },
      ],
      options:[
        {
            label:'',
            value:''
        }
      ],
      options1:[
        {
            label:'',
            value:''
        }
      ],
      options2:[
        {
            label:'',
            value:''
        }
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    if (this.id != "") {
      updataKingBaseTransactionsCompanyList(this.id).then((res) => {
        this.formData = res.data;
        
        this.flag = true;
      });
    }
  },
  methods: {
      // 点击打开弹窗
    openList(val,i) {
       this.count = i;
      this.title = val;
      this.dialogVisible = true;

      if (val == "币别") {
        getKingBaseCurrencyList().then((res) => {
          this.gridData = res.rows;
        });
      }
    },
    // 点击表格
    getRow(row) {
        this.dialogVisible=false
      if (this.title == "币别") {
       this.formData.kingBaseTransactionsCompanyDetailEntities[this.count].currencyCode=row.code
       this.formData.kingBaseTransactionsCompanyDetailEntities[this.count].currencyName=row.currencyName
     this.flagKey=1
     }
    },





    submitForm(cb) {
      if (this.flag) {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          // TODO 提交表单
          editKingBaseTransactionsCompanyList(
            this.formData,
            "KingBaseTransactionsCompany"
          ).then((res) => {
            if (res.code === 200) {
              cb();
              this.$message.success("修改成功");
              this.flag = false;
            }
          });
        });
      } else {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          // TODO 提交表单
          add(this.formData, "KingBaseTransactionsCompany").then((res) => {
            if (res.code === 200) {
              cb();
              this.$message.success("新增成功");
            }
          });
        });
      }
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    handleDataAdd() {
      if (this.formData.kingBaseTransactionsCompanyDetailEntities == undefined) {
        this.formData.kingBaseTransactionsCompanyDetailEntities = [];
      }
      let outher = {
         accountName: "",
            addressDeposit: "",
            bankAccount: "",
            bankDeposit: "",
            bankNetwork: "",
            createBy: "",
            createTime: "",
            currencyCode: "",
            descInfo: "",
            id: "",
            interbankNumber: "",
            isDefault: 0,
            isUsed: 0,
            limit: 0,
            page: 0,
            switchCode: "",
            token: "",
            transactionsCompanyId: "",
            updateBy: "",
            updateTime: "",
      };
      this.formData.kingBaseTransactionsCompanyDetailEntities.push(outher);
    },
    addNewRow() {
      this.handleDataAdd();
    },
     handleDataDelete(index, row) {
      this.$confirm("请确认是否要删除此行？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.formData.kingBaseTransactionsCompanyDetailEntities.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style>
.divider {
  margin: 0;
}
.el-icon-search {
  margin-top: 70% !important;
}</style>
